<template>
  <component 
    :is="tag"
    :class="[
      'bx-typography',
      `bx-typography--${variant}`,
      {
        'bx-typography--copyable': copyable,
        'bx-typography--ellipsis': ellipsis,
        'bx-typography--disabled': disabled,
        'bx-typography--mark': mark,
        'bx-typography--code': code,
        'bx-typography--delete': del,
        'bx-typography--strong': strong,
        'bx-typography--italic': italic,
        'bx-typography--underline': underline
      }
    ]"
    :style="typographyStyle"
  >
    <slot>{{ content }}</slot>
    <BxIcon 
      v-if="copyable" 
      name="copy" 
      class="bx-typography__copy-icon"
      @click="handleCopy"
    />
  </component>
</template>

<script>
import { computed } from 'vue'
import BxIcon from './BxIcon.vue'

export default {
  name: 'BxTypography',
  components: {
    BxIcon
  },
  props: {
    variant: {
      type: String,
      default: 'body1',
      validator: (value) => [
        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
        'subtitle1', 'subtitle2',
        'body1', 'body2',
        'caption', 'overline'
      ].includes(value)
    },
    tag: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    copyable: {
      type: Boolean,
      default: false
    },
    ellipsis: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    mark: {
      type: Boolean,
      default: false
    },
    code: {
      type: Boolean,
      default: false
    },
    del: {
      type: Boolean,
      default: false
    },
    strong: {
      type: Boolean,
      default: false
    },
    italic: {
      type: Boolean,
      default: false
    },
    underline: {
      type: Boolean,
      default: false
    }
  },
  emits: ['copy'],
  setup(props, { emit }) {
    const defaultTag = computed(() => {
      if (props.tag) return props.tag
      
      const tagMap = {
        h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',
        subtitle1: 'h6', subtitle2: 'h6',
        body1: 'p', body2: 'p',
        caption: 'span', overline: 'span'
      }
      
      return tagMap[props.variant] || 'p'
    })

    const typographyStyle = computed(() => {
      const style = {}
      
      if (props.ellipsis) {
        style.overflow = 'hidden'
        style.textOverflow = 'ellipsis'
        style.whiteSpace = 'nowrap'
      }

      return style
    })

    const handleCopy = async () => {
      try {
        const text = props.content || ''
        await navigator.clipboard.writeText(text)
        emit('copy', text)
      } catch (err) {
        console.error('复制失败:', err)
      }
    }

    return {
      defaultTag,
      typographyStyle,
      handleCopy
    }
  }
}
</script>

<style scoped>
.bx-typography {
  margin: 0;
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  position: relative;
  display: inline-block;
}

/* 标题样式 */
.bx-typography--h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.bx-typography--h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.875rem;
}

.bx-typography--h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.bx-typography--h4 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.625rem;
}

.bx-typography--h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.bx-typography--h6 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

/* 副标题样式 */
.bx-typography--subtitle1 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bx-text-secondary);
}

.bx-typography--subtitle2 {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bx-text-secondary);
}

/* 正文样式 */
.bx-typography--body1 {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

.bx-typography--body2 {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}

/* 小字样式 */
.bx-typography--caption {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--bx-text-tertiary);
}

.bx-typography--overline {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bx-text-tertiary);
}

/* 状态样式 */
.bx-typography--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bx-typography--mark {
  background: rgba(255, 235, 59, 0.3);
  padding: 0 4px;
  border-radius: 4px;
}

.bx-typography--code {
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
}

.bx-typography--delete {
  text-decoration: line-through;
  opacity: 0.7;
}

.bx-typography--strong {
  font-weight: 700;
}

.bx-typography--italic {
  font-style: italic;
}

.bx-typography--underline {
  text-decoration: underline;
}

/* 可复制样式 */
.bx-typography--copyable {
  cursor: pointer;
  padding-right: 24px;
}

.bx-typography__copy-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--bx-transition-medium);
}

.bx-typography--copyable:hover .bx-typography__copy-icon {
  opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bx-typography--h1 { font-size: 2rem; }
  .bx-typography--h2 { font-size: 1.75rem; }
  .bx-typography--h3 { font-size: 1.5rem; }
  .bx-typography--h4 { font-size: 1.25rem; }
  .bx-typography--h5 { font-size: 1.125rem; }
  .bx-typography--h6 { font-size: 1rem; }
}
</style>

